<template>
  <div id="app">
    <input type="text" v-model="ipt" v-maxLength="10" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      ipt: ""
    };
  },
  directives: {
    maxLength: {
      inserted(el, binding) {
        let iptParentwp = el.parentNode;
        let iptwp = document.createElement("div");
        let span = document.createElement("span");
        iptParentwp.replaceChild(iptwp, el);
        iptwp.appendChild(el);
        iptwp.appendChild(span);
        iptwp.style = "position: relative;display:inline-block;";
        span.innerHTML = "0/" + binding.value;
        if (el.tagName == "TEXTAREA") {
          span.style =
            " position:absolute;bottom: 8px;right: 5px;font-size:10px;color:#999";
        } else if (el.tagName == "INPUT") {
          span.style =
            " position:absolute;top: 5px;right: 3px;font-size:10px;color:#999";
        }
        el.setAttribute("maxlength", binding.value);
      },
      update(el, binding) {
        let valueLen = el.value.length;
        let span = el.nextElementSibling;
        span.innerHTML = valueLen + "/" + binding.value;
        if (valueLen == binding.value) {
          el.style.color = "red";
        } else {
          el.style.color = "";
        }
      }
    }
  }
};
</script>

<style scoped>
.iptWp {
  position: relative;
  display: inline-block;
}

.span {
  position: absolute;
  top: 5px;
  right: 3px;
  font-size: 10px;
  color: #999;
}

.spantextarea {
  position: absolute;
  bottom: 8px;
  right: 5px;
  font-size: 10px;
  color: #999;
}
</style>